<template>
    <view class="smart-page">
        <!--页面标题头begin-->
        <view class="smart-page-head">
            <view class="smart-page-head-title">picker选择列表</view>
        </view>
        <!--页面标题头end-->
        <view>
            <view class="title">普通选择器</view>
            <view class="item">
                <view class="item-title">当前选择</view>
                <view class="item-picker">
                    <picker @change="bindPickerChange" mode="selector" :range="array" range-key="cname">
                        {{array[index].cname}}
                    </picker>
                </view>
            </view>

            <view class="title">日期选择器</view>
            <view class="item">
                <view class="item-title">当前选择</view>
                <view class="item-picker">
                    <picker @change="bindDatePickerChange" mode="date">
                        {{choiceDate}}
                    </picker>
                </view>
            </view>

            <view class="title">时间选择器</view>
            <view class="item">
                <view class="item-title">当前选择</view>
                <view class="item-picker">
                    <picker @change="bindTimePickerChange" mode="time">
                        {{time}}
                    </picker>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                array: [{
                    id: 1,
                    cname: '中国'
                }, {
                    id: 2,
                    cname: '美国'
                }, {
                    id: 3,
                    cname: '巴西'
                }],
                index: 0,
                choiceDate: '2021-4-23',
                time: '12:00'
            }
        },
        methods: {
            /*改变选择*/
            bindPickerChange: function(e) {
                console.log(e.detail.value);
                this.index = e.detail.value;
            },
            bindDatePickerChange(e) {
                this.choiceDate = e.detail.value;
            },
            bindTimePickerChange(e) {
                this.time = e.detail.value;
            }
        }
    }
</script>
<style>
	.title {
		border-bottom: 1upx solid #C0C0C0;
		padding: 20upx 0;
	}

	.item {
		display: flex;
		border-bottom: 1upx solid #C0C0C0;
	}

	.item-title {
		padding: 20upx;
	}

	.item-picker {
		padding: 20upx 50upx;
	}
</style>


